<template>
	<view :style="'background-color:'+[item.style.bgColor?item.style.bgColor:'transparent']">
<<<<<<< HEAD
        <block v-if="item.params.mode=='one'">
            <view v-for="(image,index) in item.data.image" :key="index" :style="[imgStyle]" @click="jump(index)">
                <image class="one-img block" :style="index>0?'padding-top:'+item.style.imageMargin+'rpx':''" :src="image.url"  mode="widthFix"/>
            </view>
        </block>
        <block v-if="item.params.mode=='slide'">
            <view :style="[imgStyle]">
                <u-scroll-list :indicator="false">
                    <view v-for="(image, index) in item.data.image" :key="index"  @click="jump(index)">
                        <image class="slide-img block" :style="'height:'+slideHeight+[index>0?';margin-left:'+item.style.imageMargin+'rpx':'']" mode="aspectFill" :src="image.url"></image>
                    </view>
                </u-scroll-list>
            </view>
        </block>
=======
		<block v-if="item.params.mode=='one'">
			<view v-for="(image,index) in item.data.image" :key="index" :style="[imgStyle]" @click="jump(index)">
				<image class="one-img block" :style="index>0?'padding-top:'+item.style.imageMargin+'rpx':''"
					:src="image.url" mode="widthFix" />
			</view>
		</block>
		<block v-if="item.params.mode=='slide'">
			<view :style="[imgStyle]">
				<u-scroll-list :indicator="false">
					<view v-for="(image, index) in item.data.image" :key="index" @click="jump(index)">
						<image class="slide-img block"
							:style="'height:'+slideHeight+[index>0?';margin-left:'+item.style.imageMargin+'rpx':'']"
							mode="aspectFill" :src="image.url"></image>
					</view>
				</u-scroll-list>
			</view>
		</block>
>>>>>>> 7e2e8a1dd65c600a230c1c00412fef4a01e75607

		<block v-if="item.params.mode=='swiper'">
			<view :style="[imgStyle]">
				<u-swiper imgMode="aspectFill" :list="item.data.image" :height="height" indicator circular
					indicatorMode="dot" radius="10" :bgColor="item.style.bgColor?item.style.bgColor:'transparent'"
					@click="jump"></u-swiper>
			</view>
		</block>
		<block v-if="item.params.mode=='card'">
			<view :style="[imgStyle]">
				<u-swiper imgMode="aspectFill" :list="item.data.image" previousMargin="30" nextMargin="30" circular
					:height="height" :autoplay="false" radius="0"
					:bgColor="item.style.bgColor?item.style.bgColor:'transparent'" @click="jump"></u-swiper>
			</view>
		</block>
	</view>
</template>

<script>
	import { toUrl } from '@/wlkutils/tools';
	export default {
		name: "wlk-image",
		data() {
			return {
				height: '',
				slideHeight: '',
				imgStyle: {
					padding: '0',
				},

			};
		},
		//属性
		props: {
			item: {
				type: Object,
				default: () => {
					return []
				}
			},
			systemInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		created: function(e) {
			this.setImageStyle();
		},
		methods: {
			setImageStyle() {
				var _self = this;
				_self.imgStyle.padding = '0 ' + uni.$u.addUnit(_self.item.style.pageMargin, 'rpx');
				switch (_self.item.params.mode) {
					case 'one':
					case 'swiper':
					case 'card':
						_self.height = this.item.height;
						break;
					case 'slide':
						_self.slideHeight = this.item.slideHeight;
						break;
				}
			},
			jump(index) {
				if (this.item.data.image[index]['linkpath']) {
					toUrl(this.item.data.image[index]['linkpath']);
				} else {
					let urls = this.item.data.image.map(item => item.url)
					uni.previewImage({
						urls,
						current: index,
						showmenu:true
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.one-img {
		width: 100%;
		height: auto;
	}

	.slide-img {}
</style>